<template>
  <el-row>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col el-form-s" :model="search">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="" prop="orderNo">
                <el-input v-model="search.orderNo" placeholder="服务订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="storageTypeCode">
                <el-select v-model="search.storageTypeCode" filterable placeholder="货物来源">
                  <el-option v-for="item in cargoSourceTypes"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cargoOwner" label="">
                <el-input v-model="search.cargoOwner" placeholder="商家名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button @click="resetFields" plain>重置</el-button>
            </el-col>
          </el-row>

          <el-collapse-transition>
            <template  v-if="isOpen">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item label="" prop="serviceCode">
                    <el-select multiple v-model="search.serviceType" filterable placeholder="服务信息">
                      <el-option v-for="item in serviceArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="consigneName" >
                    <el-input v-model="search.consigneName" placeholder="用户姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="consignePhone">
                    <el-input v-model="search.consignePhone" placeholder="用户电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="founderUserName">
                    <el-input v-model="search.founderUserName" placeholder="下单人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="addressArr">
                    <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="收件地址"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="createTimeStart">
                    <el-date-picker type="date"
                                    placeholder="下单开始时间"
                                    v-model="search.createTimeStart"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="createTimeEnd">
                    <el-date-picker type="date"
                                    placeholder="下单结束时间"
                                    v-model="search.createTimeEnd"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="serviceState">
                    <el-select v-model="search.serviceState" filterable placeholder="订单状态">
                      <el-option v-for="item in orderStateArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="followType">
                    <el-select v-model="search.followType" filterable placeholder="跟进内容">
                      <el-option v-for="item in followTypeArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="followUser">
                    <el-input v-model="search.followUser" placeholder="跟进人"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="" prop="servcieMasterWorker">
                    <el-input v-model="search.servcieMasterWorker" placeholder="服务师傅"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="followTimeStart">
                    <el-date-picker type="date"
                                    placeholder="跟进开始时间"
                                    v-model="search.followTimeStart"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="followTimeEnd">
                    <el-date-picker type="date"
                                    placeholder="跟进结束时间"
                                    v-model="search.followTimeEnd"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-collapse-transition>

        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="ms-terminal-order/aging/list"
        :tabs="tabs"
        :columns="columns">
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="155px" align="center" label="关联单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="showDetail(scope.row)">{{ scope.row.orderNo }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="showDetail(scope.row)"
              >
                跟进
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {getCargoSourceType, getInstallServiceType, getOrderState, getSubDictListOfParentCode} from '@/utils/selectOptions'
import {copy} from '@/utils'
export default {
  name: 'timeFurtherIndex',
  data() {
    let columns = [
      {
        label: '货物来源',
        data: 'storageTypeCode',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {label: '商家名称', data: 'cargoOwner'},
      {label: '服务信息', data: 'serviceType'},
      {
        label: '订单状态',
        data: 'serviceState',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {label: '用户姓名', data: 'consigneName'},
      {label: '用户电话', data: 'consignePhone'},
      {
        label: '收件省市区',
        data: null,
        render(data, full) {
          return `${full.consigneProvince} ${full.consigneCity} ${full.consigneDistrict}`
        }
      },
      {label: '下单人', data: 'founderUserName'},
      {label: '服务师傅', data: 'servcieMasterWorker'},
      {
        label: '下单时间',
        data: 'foundDate',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '预约时间',
        data: 'timeInterval',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '出发时间',
        data: 'outBoundTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '上门时间',
        data: 'houseCallTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '签收时间',
        data: 'signTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      },
      {label: '跟进内容',
        data: 'followContent',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }},
      {label: '跟进人', data: 'followUser'},

      {
        label: '跟进时间',
        data: 'followTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      }
    ]
    return {
      cargoSourceTypes: [],
      serviceArr: [],
      orderStateArr: [],
      followTypeArr: [],
      isOpen: false,
      searchLoading: false,
      search: {
        outWarehouseNo: '',
        warehouseId: '',
        cargoOwner: '',
        ocmName: '',
        ocmStartTime: '',
        ocmEndTime: '',
        serviceType: '',
        storageTypeCode: '',
        serviceState: '',
        followContent: '',
        followTimeStart: '',
        followTimeEnd: '',
        createTimeStart: '',
        createTimeEnd: '',
        orderNo: '',
        consigneName: '',
        consignePhone: '',
        followType: '',
        founderUserName: '',
        followUser: '',
        servcieMasterWorker: ''
      },
      columns,
      tabs: [],
      typeArr: [],
      item: {}
    }
  },
  created() {
    // 商家来源
    getCargoSourceType().then(arr => {
      this.cargoSourceTypes = arr
    })
    // 服务类型
    getInstallServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 订单状态
    getOrderState().then(arr => {
      this.orderStateArr = arr
    })
    getSubDictListOfParentCode('zhiyingOrderFollow').then(arr => {
      this.followTypeArr = arr
    })
  },
  methods: {
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },

    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 跳转详情
    showDetail(data) {
      this.$router.push({ path: '/ss-oms/orders/time-further/show/' + data.orderId, query: {tab: 3, objectType: 'CF02', objectId: data.id} })
    }
  }
}
</script>
